<!--
 * @Author: 秦少卫
 * @Date: 2022-09-03 19:16:55
 * @LastEditors: 秦少卫
 * @LastEditTime: 2023-02-26 21:53:54
 * @Description: 素材面板
-->

<template>
  <div>
    <div class="searchInput">
      <Dropdown trigger="click" @on-click="onClickCategory">
        <Icon type="ios-list" size="35" />
        <DropdownMenu slot="list">
          <DropdownItem :name="item.name" v-for="item in materialCategory" :key="item.id">
            {{ item.name }}
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Input search placeholder="请输入" />
    </div>
    <div class="category">
      <div>分类：->{{ selectCategory }}</div>
      <Icon type="ios-settings" size="25" @click="onEditCategory" />
    </div>
    <div class="imgFlex">
      <div v-for="(item, index) in library" :key="item.id" style="position: relative">
        <img src="./testSvg/1.svg" alt="" @click="addItem" :draggable="true" @dragend="dragItem" />
        <Icon
          type="md-close-circle"
          size="25"
          class="deleteIcon"
          v-if="item.canEdit == 1 && isEditing"
          @click="onDelete(index)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuid } from 'uuid';

const defaultPosition = {
  left: 100,
  top: 100,
  shadow: '',
  fontFamily: '1-1',
};
export default {
  name: 'ToolBar',
  inject: ['canvas', 'fabric'],
  props: {
    materialCategory: {
      type: [Array],
      default: () => {
        return [];
      },
    },
    materialLibrary: {
      type: [Array],
      default: () => {
        return [];
      },
    },
  },
  created() {
    this.library = JSON.parse(JSON.stringify(this.materialLibrary));
  },
  data() {
    return {
      selectCategory: '全部',
      isEditing: false,
    };
  },
  methods: {
    dragItem(event) {
      const url = event.target.src;
      // 会有性能开销 dragAddItem复用更简洁
      this.fabric.loadSVGFromURL(url, (objects) => {
        const item = this.fabric.util.groupSVGElements(objects, {
          shadow: '',
          fontFamily: 'arial',
          id: uuid(),
          name: 'svg元素',
        });
        this.canvas.editor.dragAddItem(event, item);
      });
    },
    // 按照类型渲染
    addItem(e) {
      const url = e.target.src;
      this.fabric.loadSVGFromURL(url, (objects, options) => {
        const item = this.fabric.util.groupSVGElements(objects, {
          ...options,
          ...defaultPosition,
          id: uuid(),
          name: 'svg元素',
        });
        this.canvas.c.add(item);
        this.canvas.c.requestRenderAll();
      });
    },
    /**
     * 切换分类
     * val 选中分类的值
     */
    onClickCategory(val) {
      this.selectCategory = val;
    },
    /**
     * 编辑素材库
     */
    onEditCategory() {
      this.isEditing = !this.isEditing;
    },
    /**
     * 删除商品库图片
     */
    onDelete(index) {
      this.library.splice(index, 1);
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped lang="less">
.imgFlex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
img {
  display: inline-block;
  width: 85px;
  margin-left: 2px;
  margin-bottom: 2px;
  background: #f5f5f5;
  padding: 6px;
  cursor: pointer;
}
.searchInput {
  display: flex;
  margin: 20px 0 10px 0;
}
.category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.deleteIcon {
  position: absolute;
  right: -6px;
  top: -7px;
}
</style>
